{extend name="base" /}

{block name="style"}
<link href="/static/js/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
<div class="ml-64">
    {:yoyo_render('alert', ['content'=>'<strong><i class="fa fa-fw fa-info-circle"></i> 提示：</strong>按住表头可拖动节点，调整后点击【保存节点】。'])}

    <div class="row">
        <div class="col-md-12">
            <div class="block">
                {notempty name="tab_nav"}
                <ul class="md:flex-row nav nav-tabs flex flex-col flex-wrap list-none border-b-0 pl-0 mb-4" id="tab"
                role="tablist">
                    {volist name="tab_nav.tab_list" id="item"}
                    <li class="nav-item" role="presentation">
                      <a href="{$item.url|admin_url|strtolower}" class="
                        nav-link
                        block
                        font-medium
                        text-xs
                        leading-tight
                        uppercase
                        border-x-0 border-t-0 border-b-2 border-transparent
                        px-6
                        py-3
                        my-2
                        hover:border-transparent hover:bg-gray-100
                        focus:border-transparent
                        {if $tab_nav['curr_tab'] == $key}
                        active
                        {/if}
                      " id="form_config-{$key}-tab" role="tab" aria-controls="form_config-{$key}"
                        aria-selected="true">{$item.title}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link
                        block
                        font-medium
                        text-xs
                        leading-tight
                        uppercase
                        border-x-0 border-t-0 border-b-2 border-transparent
                        px-6
                        py-3
                        my-2
                        hover:border-transparent hover:bg-gray-100
                        focus:border-transparent {if $tab_nav['curr_tab'] == 'module-sort'}active{/if}" 
                            href="{:url('', ['group' => 'module-sort'])}">模块排序</a>
                    </li>
                    {/volist}
                 </ul>
                {/notempty}
                <div class="block-content tab-content">
                    <div class="tab-pane active">
                        {notempty name="menus"}
                        <div class="row data-table-toolbar">
                            <div class="col-sm-12">
                                <form action="{$Request.url}" method="get">
                                <div class="toolbar-btn-action">
                                    <a title="新增" class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-yellow-600 hover:shadow-lg focus:bg-yellow-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-lg transition duration-150 ease-in-out" href="{:strtolower(admin_url('add', ['module' => $Request.param.group]))}"><i class="fa fa-plus-circle"></i> 新增</a>
                                    <button title="保存" type="button" class="inline-block px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg transition duration-150 ease-in-out pointer-events-none opacity-60" id="save" disabled><i class="fa fa-check-circle-o"></i> 保存节点</button>
                                    <button title="隐藏禁用节点" type="button" class="inline-block px-6 py-2.5 bg-red-600 text-white font-medium text-xs leading-tight uppercase shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out" id="hide_disable"><i class="fa fa-eye-slash"></i> 隐藏禁用节点</button>
                                    <button title="显示禁用节点" type="button" class="inline-block px-6 py-2.5 bg-blue-400 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-500 hover:shadow-lg focus:bg-blue-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-600 active:shadow-lg transition duration-150 ease-in-out" id="show_disable"><i class="fa fa-eye"></i> 显示禁用节点</button>
                                    <button title="展开所有节点" type="button" class="inline-block px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg transition duration-150 ease-in-out" id="expand-all"><i class="fa fa-plus"></i> 展开所有节点</button>
                                    <button title="收起所有节点" type="button" class="inline-block px-6 py-2.5 bg-yellow-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-yellow-600 hover:shadow-lg focus:bg-yellow-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-lg transition duration-150 ease-in-out" id="collapse-all"><i class="fa fa-minus"></i> 收起所有节点</button>
                                    <span class="form-inline mb-3 xl:w-96">
                                        <input class="
                                            form-control
                                            inline-block
                                            w-18
                                            px-3
                                            py-1.5
                                            text-base
                                            font-normal
                                            text-gray-700
                                            bg-white bg-clip-padding
                                            border border-solid border-gray-300
                                            rounded
                                            transition
                                            ease-in-out
                                            m-0
                                            focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
                                        " type="text" name="max" value="{$Request.get.max|default=''}" placeholder="显示层数">
                                    </span>
                                </div>
                                </form>
                            </div>
                        </div>

                        <div class="dd" id="menu_list">
                            <ol class="dd-list">{$menus|raw}</ol>
                        </div>
                        {/notempty}

                        {notempty name="modules"}
                        <form action="{:url('')}" method="post" name="sort-form" class="sort-form">
                            <button title="保存" type="submit" class="btn btn-success push-10 ajax-post" target-form="sort-form">保存排序</button>
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="sortable" class="connectedSortable push-20">
                                        {volist name="modules" id="module"}
                                        <div class="sortable-item pull-left">
                                            <input type="hidden" name="sort[]" value="{$key}">
                                            <i class="{$module.icon}"></i> {$module.title}
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                        </form>
                        {/notempty}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/js/jquery-nestable/jquery.nestable.js"></script>
<script src="/static/js/jquery-ui/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        // 模块拖拽
        $( "#sortable" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();

        // 保存节点
        $('#save').click(function(){
            yoyo.loading();
            $.post("{:url('save')}", {menus: $('#menu_list').nestable('serialize')}, function(data) {
                yoyo.loading('hide');
                if (data.code) {
                    $('#save').addClass('pointer-events-none opacity-60');
                    yoyo.notify(data.msg, 'success');
                } else {
                    yoyo.notify(data.msg, 'danger');
                }
            });
        });

        // 初始化节点拖拽
        $('#menu_list').nestable({maxDepth:4}).on('change', function(){
            $('#save').removeAttr("disabled").removeClass('pointer-events-none opacity-60');
        });

        // 隐藏禁用节点
        $('#hide_disable').click(function(){
            $('.dd-disable').hide();
        });

        // 显示禁用节点
        $('#show_disable').click(function(){
            $('.dd-disable').show();
        });

        // 展开所有节点
        $('#expand-all').click(function(){
            $('#menu_list').nestable('expandAll');
        });

        // 收起所有节点
        $('#collapse-all').click(function(){
            $('#menu_list').nestable('collapseAll');
        });

        // 禁用节点
        $('.dd3-content').delegate('.disable', 'click', function(){
            var self     = $(this);
            var ids      = self.data('ids');
            var ajax_url = '{:strtolower(admin_url("disable", ["table" => "admin_menu"]))}';
            yoyo.loading();
            $.post(ajax_url, {ids:ids}, function(data) {
                yoyo.loading('hide');
                if (data.code) {
                    self.attr('data-original-title', '启用').removeClass('disable').addClass('enable')
                        .children().removeClass('fa-ban').addClass('fa-check-circle')
                        .closest('.dd-item')
                        .addClass('dd-disable');
                } else {
                    yoyo.notify(data.msg, 'danger');
                }
            });
            return false;
        });

        // 启用节点
        $('.dd3-content').delegate('.enable', 'click', function(){
            var self     = $(this);
            var ids      = self.data('ids');
            var ajax_url = '{:strtolower(admin_url("enable", ["table" => "admin_menu"]))}';
            yoyo.loading();
            $.post(ajax_url, {ids:ids}, function(data) {
                yoyo.loading('hide');
                if (data.code) {
                    self.attr('data-original-title', '禁用').removeClass('enable').addClass('disable')
                        .children().removeClass('fa-check-circle').addClass('fa-ban')
                        .closest('.dd-item')
                        .removeClass('dd-disable');
                } else {
                    yoyo.notify(data.msg, 'danger');
                }
            });
            return false;
        });
    });
</script>
{/block}
